<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="${CONTEXT_PATH}/treehole/js/jquery-1.9.1.min.js"></script>
    <title>文章</title>
    <style type="text/css" rel="stylesheet">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #ffa915;
        }

        .clearfix {
            *zoom: 1;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            line-height: 0;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }

        .header {
            overflow: hidden;
        }

        .header img {
            height: 60px;
            width: 100%;
        }

        .content {
        }

        .article-panel {
            padding: 10px;
            background: #ffffff;
        }

        .article-head {
            height: 40px;
            line-height: 40px;
        }

        .article-head img {
            height: 40px;
            width: 40px;
            float: left;
        }

        .article-head .them {
            float: right;
        }

        .article-main {
            padding: 10px 0;
        }

        .article-panel .art {
            text-align: right;
        }

        .comment {
            background: transparent;
        }

        .comment .title {
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
        }

        .comment .cp {
            padding: 20px 10px;
            background: #ffffff;
        }

        .cp .peopleicon {
            width: 30px;
            height: 30px;
        }

        .cp .cpc {
            position: relative;
            margin-bottom: 10px;
            padding: 8px 15px;
            background: #555;
            border-radius: 3px;
        }

        .arrow {
            position: absolute;
            overflow: hidden;
            width: 0;
            height: 0;
            line-height: 0;
            top: 10px;
            border: 5px solid transparent;

        }

        .left-arrow {
            border-right-color: #555;
            left: -10px;
        }

        .right-arrow {
            border-left-color: #555;
            right: -10px;
        }

        .post-comment {
            margin-top: 30px;
            background: #ffffff;
            padding: 10px;
        }

        .post-comment .myText {
            border-radius: 4px 4px 4px 4px;
            box-shadow: 0 5px 5px #EEEEEE inset;
            color: #666666;
            font-size: 14px;
            height: 60px;
            width: 97%;
            resize: vertical;
            border: 1px solid #ccc;
        }

        .toPost {
            display: block;
            width: 97%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid silver;
            border-radius: 3px;
        }

        .foot {
            text-align: center;
            line-height: 30px;
        }

        .foot label {
            display: block;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="wrap">
        <div class="header">
            <img src="${CONTEXT_PATH}/treehole/img/bkm.jpg">
        </div>
        <div class="content">
            <div class="article-panel">
                <div class="article-head clearfix">
                    <img src="../img/bkm.jpg">
                    <a class="them">${treeHoleArticle.time!'未知信息'}</a>
                </div>
                <div class="article-main">
                    <p>${treeHoleArticle.content!'未知信息'}</p>
                </div>
                <div class="art">
                    <img src=""><span>标签</span>
                    <img src=""><span>5人留言</span>
                    <img src=""><span>5人点赞</span>
                </div>
            </div>
            <div class="comment">
                <div class="title">留言</div>
                <div class="cp">
                    <#list treeHoleCommentList as item>
                        <#if item_index%2==0>
                            <div class="left clearfix">
                                <img class="peopleicon" style="float: left">
                                <div class="cpc" style="float: left;margin-left: 10px">
                                    <span class="arrow left-arrow"></span>
                                    <p>${item.content}</p>
                                </div>
                            </div>
                            <#else>
                                <div class="right clearfix">
                                    <img class="peopleicon" style="float: right">
                                    <div class="cpc" style="text-align: right;float: right;margin-right: 10px">
                                        <span class="arrow right-arrow"></span>
                                        <p>${item.content}</p>
                                    </div>
                                </div>
                        </#if>
                    </#list>
                </div>
            </div>
            <!--div class="post-comment">
                <form id="postForm" style="text-align: center">
                    <textarea class="myText">这里是留言区</textarea>
                    <div class="input-box" style="text-align: left;height: 30px;line-height: 30px">
                        <input type="checkbox" id="niming">
                        <label for="niming">匿名</label>
                    </div>
                    <div class="btn-panle" style="height: 30px;line-height: 30px;text-align: center">
                        <a class="toPost">
                            发表
                        </a>
                    </div>
                </form>
            </div-->
        </div>
        <div class="footer">
            <div class="call foot">
                <span class="title foot">联系我们</span>
                <div class="people">
                    <label>程智超:1888888888</label>
                    <label>龚意:1666666666</label>
                </div>
            </div>
            <div class="complany foot">****公司</div>
            <div class="copyright foot">
                copyright@FUCK OFF
            </div>
        </div>
    </div>
</div>
</body>
</html>